<script setup lang="ts">
import { MyPermissionList } from '../type.ts';
import { inject } from 'vue';
import { permissionKey } from '../type.ts';

withDefaults(
  defineProps<{
    rowData: MyPermissionList;
    isExpand: boolean;
    intervalNumber?: number;
  }>(),
  {
    intervalNumber: 0
  }
);

defineEmits<{
  deletePermission: [id: number];
}>();

const expanded = defineModel<number[]>('expanded');

const showDialog = inject(permissionKey);
function addPermission(data: MyPermissionList) {
  // 当前等级加1
  const level = (data.level + 1) as 1 | 2 | 3 | 4;
  showDialog!('SAVE', {
    level: level,
    pid: data.id!,
    name: '',
    code: ''
  });
}
// 切换展开状态
function toggleExpand(rowData: MyPermissionList) {
  if (!rowData.children || rowData.children.length === 0) return;
  if (rowData.expand) {
    // 如果当前是展开状态
    const index = expanded.value?.findIndex(id => id === rowData.id!);
    expanded.value?.splice(index!, 1);
  } else {
    // 如果当前未展开
    expanded.value?.push(rowData.id!);
  }
  rowData.expand = !rowData.expand;
}
</script>

<template>
  <q-tr v-show="isExpand">
    <q-td key="name" @click="toggleExpand(rowData)" style="width: 180px">
      <div
        class="fit flex items-center flex-nowrap q-ml-sm"
        :style="{ paddingLeft: intervalNumber + 'px' }"
      >
        <q-icon
          class="q-mr-sm"
          :name="rowData.expand ? 'expand_less' : 'expand_more'"
          v-if="rowData.children && rowData.children.length > 0"
        />
        {{ rowData.name }}
      </div>
    </q-td>
    <q-td key="code" style="width: 150px">
      {{ rowData.code }}
    </q-td>
    <q-td key="updateTime" style="width: 150px">
      {{ rowData.updateTime }}
    </q-td>
    <q-td key="control">
      <div class="fit flex items-center q-gutter-xs">
        <authority permission="btn.Permission.add" #="{ hasPermission }">
          <q-btn
            :label="rowData.level === 3 ? '添加功能' : '添加菜单'"
            size="xs"
            color="primary"
            :disabled="rowData.level === 4 || !hasPermission"
            @click="addPermission(rowData)"
          />
        </authority>
        <authority permission="btn.Permission.update" #="{ hasPermission }">
          <q-btn
            label="编辑"
            size="xs"
            color="warning"
            :disabled="rowData.level === 1 || !hasPermission"
            @click="showDialog!('UPDATE', rowData)"
          />
        </authority>
        <authority permission="btn.Permission.remove" #="{ hasPermission }">
          <q-btn
            label="删除"
            size="xs"
            color="negative"
            :disabled="rowData.level === 1 || !hasPermission"
            @click="$emit('deletePermission', rowData.id!)"
          />
        </authority>
      </div>
    </q-td>
  </q-tr>
  <!-- tr标签必须都是同级 也不能掺杂其他标签 -->
  <template v-if="rowData.children && rowData.children.length > 0">
    <template v-for="child in rowData.children" :key="child.id">
      <TableExpand
        :isExpand="isExpand && (rowData.expand ?? false)"
        :row-data="child as MyPermissionList"
        :interval-number="intervalNumber + 15"
        @deletePermission="id => $emit('deletePermission', id)"
        v-model:expanded="expanded"
      />
    </template>
  </template>
</template>

<style scoped lang="scss">
/* 定义展开动画 */
.expand-enter-active,
.expand-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

.expand-enter-from,
.expand-leave-to {
  height: 0px;
}

.expand-enter-to,
.expand-leave-from {
  height: 62px;
}
</style>
